import React, { Component } from "react";
import MainLayout from "@component/mainLayout/mainLayout";
import Card from "./card";
import { Tabs, Toast } from "antd-mobile";
import "./index.scss";
import yhTools from "@tools/yh";
import { InterfaceG } from "@config/Config";
import { openWebView } from "@tools/native/navigate";
import Banner from "@/views/viewCommon/Banner";

class BankList extends Component {
	constructor(props) {
		super(props);
		this.state = {
			initialPage: 0, //tabs页面索引
			mybankList: [], //我的银行卡列表
			bannerList: []
		};
	}
	componentDidMount = () => {
		this.getBannerList();
		this.getAllMyBankList();
	};

	/**
	 * @msg: 获取我的银行卡列表
	 * @param {*}
	 * @return {*}
	 */
	getAllMyBankList = () => {
		Toast.loading("加载中...", 120);
		const { initialPage } = this.state;
		let obj = {
			url: InterfaceG.bankManageList,
			params: {
				channelCode: "ll",
				cardType: initialPage === 0 ? "2" : "3"
			},
			_alertShow: false
		};
		yhTools.request(obj).then(res => {
			Toast.hide();
			if (res.code === "0") {
				this.setState({
					mybankList: res.data
				});
			} else {
				Toast.info(res.message, 2);
			}
		});
	};

	chooseBank = item => {
		this.props.history.push(
			`/bankManageInfo?accountNo=${item.accountNoEncrypt}&&bankMobilePhone=${item.userBankPhone}&&bankName=${item.bankName}&&id=${item.id}&&logUrl=${item.logUrl}&&singleLimitAmt=${item.singleLimitAmt}&&dayLimitAmt=${item.dayLimitAmt}`
		);
	};
	onGoSign = item => {
		this.props.history.push(
			`/signBank/${JSON.stringify({
				accountNoEncrypt: item.accountNoEncrypt,
				bankName: item.bankName,
				accountName: item.accountName,
				userBankPhone: item.userBankPhone,
				id: item.id
			})}`
		);
	};
	addBank = () => {
		this.props.history.push(`/bankManageAdd`);
	};
	/**获取banner */
	getBannerList() {
		const params = {
			url: InterfaceG.getChannelBannerList,
			params: {
				pageType: "MY_BANK_CARD_PAGE",
				productNo: "601"
			},
			_alertShow: false
		};
		yhTools.request(params).then(res => {
			const { code, data = {} } = res;
			if (code == "0") {
				let bannerList = [];
				let bannerObj = data["1"] && data["1"].length > 0 ? data["1"]["0"] : {};
				bannerObj["link"] = bannerObj.linkUrl;
				bannerList.push(bannerObj);
				this.setState({
					bannerList
				});
			}
		});
	}

	/**
	 * @msg: 标签变化
	 * @param {*} index
	 * @return {*}
	 */
	tabsChange = index => {
		console.log(index);
		this.setState(
			{
				initialPage: index
			},
			() => {
				this.getAllMyBankList();
			}
		);
	};

	render() {
		const { mybankList } = this.state;
		const { bannerList, initialPage } = this.state;
		const _pageParams = {
			header: {
				title: "银行卡"
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		const tabs = [{ title: "储蓄卡" }, { title: "信用卡" }];

		return (
			<MainLayout pageParams={_pageParams}>
				<div className="page-bankList">
					<div className="bank-list-container">
						<div className="list-box">
							<Tabs
								className="list-box-tabs"
								tabs={tabs}
								tabBarUnderlineStyle={{
									width: ".32rem",
									left: initialPage === 0 ? "1.7rem" : "5.45rem"
								}}
								initialPage={0}
								onChange={(tab, index) => {
									this.tabsChange(index);
								}}
							>
								<div className="tabs-savings">
									{mybankList.length > 0 &&
										mybankList.map(item => (
											<Card
												text={"储蓄卡"}
												item={item}
												onClick={() => this.chooseBank(item)}
												onGoSign={() => this.onGoSign(item)}
												key={Math.random()}
											/>
										))}
								</div>
								<div className="tabs-credit">
									{mybankList.length > 0 &&
										mybankList.map(item => (
											<Card
												text={"信用卡"}
												item={item}
												onClick={() => this.chooseBank(item)}
												onGoSign={() => this.onGoSign(item)}
												key={Math.random()}
											/>
										))}
								</div>
							</Tabs>

							<div className="bankList-add-btn-wrap ui-flex ui-flex-justify-center ui-flex-align-center">
								<div className="bankList-add-btn" onClick={this.addBank}>
									添加银行卡
								</div>
							</div>
						</div>
					</div>
					<Banner bannerList={bannerList} history={this.props.history} />
				</div>
			</MainLayout>
		);
	}
}

export default BankList;
